<template>
    <div class="haveprize">
        <div v-infinite-scroll="loadMore" :infinite-scroll-disabled="busy" infinite-scroll-distance="50">
              <div class="goods_list">
                <ul ref="goodsul">
                  <li ref="goodsli" class="goodsli" v-for="item in goods_list" :key="item.id">
                    <img class="goods_img" :src="item.img" alt="">
                    <div class="goods_text">
                      <p class="goods_name">{{item.name}}</p>
                      <p class="goods_word">{{item.time}}</p>

                      <div class="goods_join">
                       
                        <router-link to='/PrizeDetail' class="btn" > 开奖信息</router-link>
                      </div>
                    </div>
                  </li>

                </ul>
                <load-more tip="loading" :show-loading="busy"></load-more>
              </div>
            </div>
    </div>
</template>

<script>
  import {LoadMore } from "vux";

export default {
   components:{
LoadMore
   },
    data(){
        return{
             busy: false,

                goods_list: [
          {
            id: 1,
            name: "小米8 青春版 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
            time: "2018-10-13 已开奖",
             
          },
          {
            id: 2,
            name: "小米8 屏幕指纹版 8GB+128GB",
            img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
            time: "2018-10-13 已开奖",
             
          },
          {
            id: 3,
            name: "小米8 SE 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
            time: "2018-10-13 已开奖",
             
          },
          {
            id: 4,
            name: "小米MIX 2S 8GB+256GB",
            img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
            time: "2018-10-13 已开奖",
          
            
          },
          {
            id: 5,
            name: "小米MIX 2 全陶瓷尊享版",
            img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
            time: "2018-10-13 已开奖",
             
          },

        ],
           addgoods_list: [
          {
            id: 6,
            name: "小米8 青春版 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1537323963.1278763!220x220.jpg",
            time: "2018-10-13  已开奖",
             
          },
          {
            id: 7,
            name: "小米8 屏幕指纹版 8GB+128GB",
            img: "https://i1.mifile.cn/a1/pms_1537356460.6227958!220x220.png",
            time: "2018-10-13  已开奖",
             
          },
          {
            id: 8,
            name: "小米8 SE 4GB+64GB",
            img: "https://i1.mifile.cn/a1/pms_1527684990.93616987!220x220.jpg",
            time: "2018-10-13  已开奖",
             
          },
          {
            id: 9,
            name: "小米MIX 2S 8GB+256GB",
            img: "https://i1.mifile.cn/a1/pms_1522034061.12391230!220x220.jpg",
            time: "2018-10-13  已开奖",
             
          },
          {
            id: 10,
            name: "小米MIX 2 全陶瓷尊享版",
            img: "https://i1.mifile.cn/a1/pms_1509723483.31416776!220x220.jpg",
            time: "2018-10-13  已开奖",
             
          }
        ]
        }
    },
    methods:{
          loadMore() {

        this.busy = true;
        //官方示例中延迟了1秒，防止滚动条滚动时的频繁请求数据
        setTimeout(() => {
          //这里请求接口去拿数据，实际应该是调用一个请求数据的方法

          this.goods_list = this.goods_list.concat(this.addgoods_list);

          this.busy = false;


    
        }, 300);

      },
    }




};
</script>

<style scoped lang="less">
  @import "../style/base.less";

.haveprize {



  .goods_list {
    background: #fff;
    ul {
      padding: 24 / @px;
      padding-bottom: 0;
      padding-top: 0;
      li {
        padding-bottom: 24 / @px;
        padding-top: 24 / @px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        justify-content: center; // align-items: center;
        padding-bottom: 24 / @px;
        .goods_img {
          width: 180 / @px;
          height: 180 / @px;
        }
        .goods_text {
          flex: 1;
          margin-left: 25 / @px;
          overflow: hidden;
          .goods_name {
            font-size: 30 / @px;
            color: #1a1a1a;
          }
          .goods_word {
            margin-top: 10 / @px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 26 / @px;
            color: #666;
          }

          .goods_join {
            margin-top: 18 / @px;
            font-size: 24 / @px; // margin-top: 26/@px;
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            .gold {
              float: left;
              p:first-child {
                font-size: 36 / @px;
                color: #ff0032;
              }
            }
            .btn {
              float: right;
              text-align: center;
              padding: 12 / @px 14 / @px;
              background: #ffdb4f;
              border-radius: 10 / @px; //   line-height: 60 / @px;
              font-size: 28 / @px;
              color: #1a1a1a;
            }
          }
        }
      }
    }
  }
}
</style>